import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    Actions
} from 'react-native-router-flux';

import {
    Avatar,
    Press
} from './../../components';

import like_icon from './img/liked_icon.png';

import * as Const from './../../const';


import parseUrl from './../../utils/parseUrl';

interface Props {
    onDialogClose: Function,
    users: Array<any>,
    userId: string | number
}

class Match extends PureComponent<Props> {
    static defaultProps = {
        users: [],
        onDialogClose: () => null
    }

    get userId() {
        const {
            userId = 0
        } = this.props;
        return ~~userId;
    }

    get users() {
        const {
            users
        } = this.props;
        return users;
    }

    get loginUser() {
        return this.users.find(({userId}) => (
            ~~userId === this.userId
        )) || {}
    }

    get likeUser() {
        return this.users.find(({userId}) => (
            ~~userId !== this.userId
        )) || {}
    }

    getAvatar(photos: Array<any>) {
        const images: Array<any> = (
            photos.filter(({attachId}) => attachId)
        )
        const {
            url = ``
        } = images.find(({isAvatar}) => isAvatar) || {}
        return parseUrl(url);
    }

    get myAvatar() {
        const {
            photos = []
        } = this.loginUser;
        return this.getAvatar(photos);
    }

    get userName() {
        const {
            userName
        } = this.likeUser;
        return userName;
    }

    get userAvatar() {
        const {
            photos = []
        } = this.likeUser;
        return this.getAvatar(photos);
    }

    private toChat = () => {
        const {
            userId,
            nickName
        } = this.likeUser;
        this._onClose();
        Actions.push(`/message`, {
            userId: userId,
            nickName: nickName
        })
    }

    private _onClose = () => {
        this.props.onDialogClose()
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.users}>
                    <View style={styles.userItem}>
                        <Avatar
                            size={48}
                            url={this.myAvatar}
                        />
                        <Text style={styles.userName}>
                            You
                        </Text>
                    </View>
                    <Image
                        source={like_icon}
                        style={styles.likeIcon}
                    />
                    <View style={styles.userItem}>
                        <Avatar
                            size={48}
                            url={this.userAvatar}
                        />
                        <Text style={styles.userName}>
                            {this.userName}
                        </Text>
                    </View>
                </View>
                <View style={styles.textContent}>
                    <Text style={styles.text}>
                        You & {this.userName}
                    </Text>
                    <Text style={styles.text}>
                        like each other!
                    </Text>
                </View>
                <View style={styles.footer}>
                    <Press
                        style={styles.button}
                        onPress={this.toChat}
                    >
                        <Text style={styles.buttonText}>
                            Send a message
                        </Text>
                    </Press>
                    <Press
                        onPress={this._onClose}
                        style={[styles.button,styles.cancel]}
                    >
                        <Text style={styles.buttonText}>
                            Keep playing
                        </Text>
                    </Press>
                </View>
            </View>
        )
    }
}

export default Match;

const styles = StyleSheet.create({
    container: {
        width: 268,
        height: 344,
        borderWidth:1,
        borderRadius:8,
        paddingTop:50,
        alignSelf:`center`,
        borderColor:`#61677C`,
        paddingHorizontal:20,
        backgroundColor:`#1E1E24`
    },
    users: {
        flexDirection: `row`,
        alignItems: `center`,
        justifyContent: `center`
    },
    userItem:{
        alignItems:`center`
    },
    likeIcon:{
        marginHorizontal:26
    },
    userName:{
        fontSize:14,
        color:`#fff`,
        paddingTop:6,
        fontFamily:Const.fontFamily
    },
    text: {
        fontSize: 14,
        color: `#fff`,
        textAlign: `center`,
        lineHeight: 24,
        fontWeight:`700`
    },
    textContent: {
        paddingTop: 16
    },
    button: {
        height: 36,
        marginBottom: 16,
        borderRadius:8,
        alignItems: `center`,
        justifyContent: `center`,
        backgroundColor:`#AA00FF`
    },
    footer: {
        paddingTop:26
    },
    buttonText:{
        fontSize:14,
        color:`#fff`,
        fontFamily:Const.fontFamily
    },
    cancel:{
        backgroundColor:Const.color
    }
}) as any